* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'EB Garamond', serif;
  color: #fff;
  line-height: 1.6;
  background-color: #f8f9fa;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden; /* evita scroll horizontal */
  
}

/*======================================
HERO
======================================*/
.hero-legislacion{
position:relative;
width:100%;
min-height:700px;
display:flex;
align-items:center;
overflow:hidden;
background:url("images/hero-legislacion.jpg") center center/cover no-repeat;
}

.hero-overlay{
position:absolute;
inset:0;
background:rgba(5,15,30,0.6);
}

.hero-content{
position:relative;
z-index:2;
width:100%;
max-width:1920px;
margin:0 auto;
padding:0 130px;
}

.hero-content h1{
margin:0;
color:#fff;
font-weight:400;
line-height:1.08;
}

.hero-content h1 span{
display:block;
}

.hero-content h1 span:first-child{
font-size:5rem;
}

.hero-content h1 span:nth-child(2){
font-size:5.3rem;
font-weight:700;
}

.hero-bottom{
display:flex;
align-items:center;
gap:45px;
margin-top:22px;
}

.hero-bottom .gold{
color:#D8B45B;
font-size:5rem;
font-weight:700;
letter-spacing:3px;
}

.hero-bottom .line{
width:460px;
height:6px;
background:#fff;
border-radius:10px;
}

/*======================================
TABLET
======================================*/
@media(max-width:1200px){
.hero-legislacion{
min-height:560px;
}
.hero-content{
padding:0 70px;
}
.hero-content h1 span:first-child{
font-size:3.7rem;
}
.hero-content h1 span:nth-child(2){
font-size:4rem;
}
.hero-bottom .gold{
font-size:3.8rem;
}
.hero-bottom .line{
width:280px;
}
}

/*======================================
MÓVIL
======================================*/
@media(max-width:768px){
.hero-legislacion{
min-height:500px;
}
.hero-content{
padding:0 30px;
}
.hero-content h1 span:first-child{
font-size:2.4rem;
}
.hero-content h1 span:nth-child(2){
font-size:2.7rem;
}
.hero-bottom{
gap:18px;
margin-top:18px;
}
.hero-bottom .gold{
font-size:2.8rem;
letter-spacing:1px;
}
.hero-bottom .line{
flex:1;
height:4px;
}
}

/*======================================
INTRO
======================================*/

.intro-legislacion{
padding:90px 20px;
background:#f8f8f8;
}

.intro-container{
max-width:1200px;
margin:0 auto;
text-align:center;
}

.intro-legislacion h2{
margin:0;
font-size:2.5rem;
font-weight:300;
line-height:1.15;
letter-spacing:.5px;
color:#23425E;
text-transform:uppercase;
}

.intro-legislacion h2 .gold{
color:#B28653;
font-weight:700;
}

.intro-legislacion h2 .blue{
color:#23425E;
font-weight:300;
}

.intro-legislacion p{
margin:55px auto 0;
max-width:1200px;
font-size:2.15rem;
font-weight:300;
line-height:1.35;
color:#23425E;
}

.intro-legislacion p strong{
font-weight:700;
}

/*======================================
TABLET
======================================*/

@media(max-width:1024px){

.intro-legislacion{
padding:70px 30px;
}

.intro-legislacion h2{
font-size:2.8rem;
}

.intro-legislacion p{
font-size:1.7rem;
margin-top:40px;
}

}

/*======================================
MÓVIL
======================================*/

@media(max-width:768px){

.intro-legislacion{
padding:55px 20px;
}

.intro-legislacion h2{
font-size:1.8rem;
line-height:1.25;
}

.intro-legislacion p{
font-size:1.2rem;
line-height:1.5;
margin-top:30px;
}

}

/*======================================
ASESORÍA
======================================*/

.asesoria-hero{
position:relative;
min-height:410px;
display:flex;
align-items:center;
overflow:hidden;
background:url("images/asesoria-bg.jpg") center center/cover no-repeat;
}

.asesoria-overlay{
position:absolute;
inset:0;
background:linear-gradient(90deg,
rgba(255,255,255,.94) 0%,
rgba(255,255,255,.88) 28%,
rgba(255,255,255,.55) 52%,
rgba(255,255,255,0) 72%);
}

.asesoria-container{
position:relative;
z-index:2;
width:100%;
max-width:1920px;
margin:0 auto;
padding:0 95px;
}

.asesoria-container h2{
margin:0;
max-width:900px;
font-size:4.5rem;
font-weight:300;
line-height:1.18;
color:#23425E;
letter-spacing:.5px;
}

.asesoria-container h2 span{
font-weight:300;
}

.asesoria-container h2 strong{
font-weight:700;
}

/*======================================
TABLET
======================================*/

@media(max-width:1024px){

.asesoria-hero{
min-height:520px;
}

.asesoria-container{
padding:0 60px;
}

.asesoria-container h2{
max-width:620px;
font-size:3.3rem;
}

}

/*======================================
MÓVIL
======================================*/

@media(max-width:768px){

.asesoria-hero{
min-height:420px;
background-position:72% center;
}

.asesoria-overlay{
background:linear-gradient(90deg,
rgba(255,255,255,.96) 0%,
rgba(255,255,255,.90) 65%,
rgba(255,255,255,.40) 100%);
}

.asesoria-container{
padding:0 25px;
}

.asesoria-container h2{
max-width:100%;
font-size:2.15rem;
line-height:1.3;
}

}

/*======================================
PROCESO
======================================*/

.proceso-lexon{
position:relative;
padding:90px 20px 80px;
overflow:hidden;
background:url("images/fondo-proceso.webp") center center/cover no-repeat;
}

.proceso-overlay{
position:absolute;
inset:0;
background:rgba(255,255,255,0.2);
backdrop-filter:blur(1px);
}

.proceso-container{
position:relative;
z-index:2;
max-width:1200px;
margin:0 auto;
}

.proceso-container h2{
margin:0 0 70px;
text-align:center;
font-size:2.8rem;
font-weight:300;
line-height:1.2;
color:#24476A;
text-transform:uppercase;
}

.proceso-container h2 strong{
font-weight:700;
}

.proceso-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px;
max-width:850px;
margin:0 auto;
}

.proceso-card{
background:#234565;
padding:30px 25px 40px;
text-align:center;
position:relative;
border-bottom:5px solid #B28752;
min-height:500px;
display:flex;
flex-direction:column;
align-items:center;
}

.proceso-card .numero{
width:100%;
text-align:left;
font-size:2rem;
font-weight:700;
color:#fff;
margin-bottom:20px;
}

.proceso-card img{
width:200px;
height:200px;
border-radius:50%;
object-fit:cover;
margin-bottom:35px;
}

.proceso-card p{
margin:0;
font-size:1.6rem;
line-height:1.45;
color:#fff;
}

.proceso-card p strong{
font-weight:700;
}

.proceso-texto{
max-width:980px;
margin:70px auto 0;
text-align:center;
}

.proceso-texto p{
margin:0;
font-size:1.7rem;
line-height:1.55;
color:#24476A;
}

.proceso-texto strong{
font-weight:700;
}

/*======================================
TABLET
======================================*/

@media(max-width:1024px){

.proceso-container h2{
font-size:2.2rem;
}

.proceso-grid{
gap:30px;
}

.proceso-card{
min-height:460px;
}

.proceso-card img{
width:150px;
height:150px;
}

.proceso-card p{
font-size:1.45rem;
}

}

/*======================================
MÓVIL
======================================*/

@media(max-width:768px){

.proceso-lexon{
padding:60px 20px;
}

.proceso-container h2{
font-size:1.55rem;
margin-bottom:40px;
}

.proceso-grid{
grid-template-columns:1fr;
gap:25px;
}

.proceso-card{
min-height:auto;
padding:25px;
}

.proceso-card img{
width:140px;
height:140px;
margin-bottom:25px;
}

.proceso-card p{
font-size:1.2rem;
}

.proceso-texto{
margin-top:40px;
}

.proceso-texto p{
font-size:1.15rem;
}

}

/*======================================
MULTAS
======================================*/

.multas-hero{
position:relative;
min-height:420px;
display:flex;
align-items:center;
overflow:hidden;
background:url("images/multas-bg.webp") center center/cover no-repeat;
}

.multas-overlay{
position:absolute;
inset:0;
background:linear-gradient(90deg,
rgba(255,255,255,0) 20%,
rgba(255,255,255,.20) 40%,
rgba(255,255,255,.82) 68%,
rgba(255,255,255,.96) 100%);
}

.multas-container{
position:relative;
z-index:2;
width:100%;
max-width:1920px;
margin:0 auto;
padding:0 95px;
display:flex;
justify-content:flex-end;
}

.multas-container h2{
margin:0;
max-width:750px;
text-align:center;
font-size:3.6rem;
font-weight:300;
line-height:1.22;
color:#27486A;
}

.multas-container h2 strong{
font-weight:700;
}

/*======================================
TABLET
======================================*/

@media(max-width:1024px){

.multas-hero{
min-height:340px;
}

.multas-container{
padding:0 50px;
}

.multas-container h2{
font-size:2.8rem;
max-width:560px;
}

}

/*======================================
MÓVIL
======================================*/

@media(max-width:768px){

.multas-hero{
min-height:300px;
background-position:25% center;
}

.multas-overlay{
background:linear-gradient(90deg,
rgba(255,255,255,.45) 0%,
rgba(255,255,255,.88) 60%,
rgba(255,255,255,.96) 100%);
}

.multas-container{
padding:0 25px;
justify-content:center;
}

.multas-container h2{
font-size:2rem;
max-width:100%;
}

}

/*======================================
NORMATIVIDAD GRID
======================================*/

.normatividad-grid{
padding:80px 20px;
background:#fff;
}

.grid-container{
max-width:1400px;
margin:0 auto;
display:grid;
grid-template-columns:1fr 0.9fr 1fr;
grid-template-rows:320px 240px 250px;
gap:10px;
}

.card{
position:relative;
overflow:hidden;
display:flex;
align-items:flex-end;
background-size:cover;
background-position:center;
}

.card .overlay{
position:absolute;
inset:0;
}

.card.light .overlay{
background:rgba(255,255,255,0.4);
}

.card.dark .overlay{
background:rgba(32,61,92,0.4);
}

.card .content{
position:relative;
z-index:2;
padding:28px;
}

.card.center{
align-items:center;
justify-content:center;
text-align:center;
}

.card.center .content{
text-align:center;
}

.card h3{
margin:0 0 15px;
font-size:2rem;
font-weight:700;
line-height:1.3;
}

.card p{
margin:0;
font-size:1.35rem;
line-height:1.55;
}

.light h3,
.light p{
color:#24476A;
}

.dark h3,
.dark p{
color:#fff;
}

.card-1{background-image:url("images/Normatividad sanitaria.jpg");grid-column:1;grid-row:1;}
.card-2{background-image:url("images/Qué normatividad debo cumplir.jpg");grid-column:2;grid-row:1 / span 2;}
.card-3{background-image:url("images/Residuos RPBI.jpg");grid-column:3;grid-row:1;}
.card-4{background-image:url("images/Normatividad de seguridad e higiene.jpg");grid-column:1;grid-row:2;}
.card-5{background-image:url("images/Normatividad en materia comercial.jpg");grid-column:3;grid-row:2;}
.card-6{background-image:url("images/Normatividad en materia de publicidad.jpg");grid-column:1;grid-row:3;}
.card-7{background-image:url("images/Guías de práctica clínica.jpg");grid-column:2 / span 2;grid-row:3;}

.card-2 .content{
display:flex;
height:100%;
flex-direction:column;
justify-content:space-between;
align-items:center;
text-align:center;
}

.card-2 h3{
font-size:2.2rem;
max-width:320px;
margin:auto auto 275px;
}

.card-2 p{
max-width:330px;
margin:0 auto;
}

.card-6,
.card-7{
align-items:flex-end;
}

/*======================================
TABLET
======================================*/

@media(max-width:1100px){

.grid-container{
grid-template-columns:repeat(2,1fr);
grid-template-rows:auto;
}

.card{
grid-column:auto!important;
grid-row:auto!important;
min-height:320px;
}

}

/*======================================
MÓVIL
======================================*/

@media(max-width:768px){

.normatividad-grid{
padding:50px 20px;
}

.grid-container{
display:flex;
flex-direction:column;
gap:20px;
}

.card{
min-height:280px;
}

.card h3{
font-size:1.6rem;
}

.card p{
font-size:1.1rem;
}

}

/*=====================================
BENEFICIOS
=====================================*/

.beneficios-section{

    padding:120px 20px;
    background:#fff;
    overflow:hidden;

}

.beneficios-container{

    max-width:1600px;
    margin:auto;

    display:grid;
    grid-template-columns: 820px 1fr;

    align-items:center;
    gap:30px;

    position:relative;

}

/*====================
LISTA
====================*/

.beneficios-list{

    display:flex;
    flex-direction:column;
    gap:38px;

    position:relative;
    z-index:2;

}

.beneficio-item{

    width:610px;
    height:102px;

    background:#ECEFF3;

    display:flex;
    justify-content:space-between;
    align-items:center;

    position:relative;

    box-shadow:0 12px 35px rgba(0,0,0,.05);

}

.item1{

    margin-left:120px;

}

.item2{

    margin-left:40px;

}

.item3{

    margin-left:0;

}

.item4{

    margin-left:40px;

}

.item5{

    margin-left:120px;

}

/*====================
TEXTO
====================*/

.beneficio-text{

    padding-left:45px;
    width:74%;

}

.beneficio-text h3{

    font-size:30px;
    color:#1f3d5d;
    margin-bottom:8px;
    font-weight:700;

}

.beneficio-text p{

    font-size:20px;
    line-height:1;
    color:#3d536d;

}

/*====================
ICONO
====================*/

.beneficio-icon{

    width:112px;
    height:112px;

    background:#183C60;
    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    margin-right:-56px;

    position:relative;
    z-index:5;

    flex-shrink:0;

    box-shadow:
    18px 0 0 #d9dde2;

}

.beneficio-icon img{

    width:110px;

}

/*====================
LINEAS
====================*/

.beneficio-item::after{

    content: "";
  position: absolute;
  width: 271px;
  height: 4px;
  background: #1f3d5d;
  right: -332px;
  top: 50%;

}

.item1::after{

    width:285px;

}

.item5::after{

    width:285px;

}

/*====================
CIRCULO
====================*/

.beneficios-circle{

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;

}

.circle-border{

    width:540px;
    height:540px;

    border-radius:50%;

    border:4px dashed #1f3d5d;

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;

}

.circle-border::before{

    content:"";

    position:absolute;

    width:470px;
    height:470px;

    border-radius:50%;

    background:#fff;

    box-shadow:
    inset 0 0 0 16px #dfe3e7,
    0 10px 35px rgba(0,0,0,.10);

}

.circle-content{

    width:330px;

    text-align:center;

    position:relative;
    z-index:5;

}

.circle-content img{

    width:105px;
    margin-bottom:35px;

}

.circle-content h3{

    font-size:34px;
    line-height:1.45;
    color:#26425f;
    font-weight:400;

}

.circle-content strong{

    font-weight:700;

}

/*====================================================
RESPONSIVE - BENEFICIOS
=====================================================*/

/*==========================
TABLET
==========================*/

@media (max-width:1200px){

.beneficios-section{

    padding:90px 30px;

}

.beneficios-container{

    grid-template-columns:1fr;
    gap:70px;

}

.beneficios-circle{

    order:-1;

}

.circle-border{

    width:470px;
    height:470px;

    margin:auto;

}

.circle-border::before{

    width:400px;
    height:400px;

}

.circle-content{

    width:280px;

}

.circle-content img{

    width:90px;
    margin-bottom:25px;

}

.circle-content h3{

    font-size:28px;

}

.beneficios-list{

    width:100%;
    align-items:center;

}

.beneficio-item{

    width:100%;
    max-width:720px;

    height:96px;

    margin-left:0 !important;

}

.beneficio-text{

    padding-left:35px;

}

.beneficio-text h3{

    font-size:27px;

}

.beneficio-text p{

    font-size:18px;

}

.beneficio-icon{

    width:96px;
    height:96px;

    margin-right:-48px;

}

.beneficio-icon img{

    width:92px;

}

.beneficio-item::after{

    display:none;

}

}


/*==========================
MOVIL
==========================*/

@media (max-width:768px){

.beneficios-section{

    padding:0px 60px;

}

.beneficios-container{

    grid-template-columns:1fr;
    gap:50px;

}

.beneficios-circle{

    order:-1;

}

.circle-border{

    width:300px;
    height:300px;

    border-width:3px;

}

.circle-border::before{

    width:245px;
    height:245px;

    box-shadow:
    inset 0 0 0 10px #dfe3e7,
    0 10px 25px rgba(0,0,0,.10);

}

.circle-content{

    width:180px;

}

.circle-content img{

    width:65px;
    margin-bottom:18px;

}

.circle-content h3{

    font-size:20px;
    line-height:1.45;

}

.beneficios-list{

    gap:24px;

}

.beneficio-item{

    width:100%;
    height:auto;

    margin-left:0 !important;

    display:flex;
    align-items:center;

    padding:20px 0;

}

.beneficio-text{

    width:calc(100% - 75px);

    padding-left:22px;
    padding-right:15px;

}

.beneficio-text h3{

    font-size:21px;
    margin-bottom:6px;

}

.beneficio-text p{

    font-size:15px;
    line-height:1.45;

}

.beneficio-icon{

    width:72px;
    height:72px;

    margin-right:-36px;

    box-shadow:
    10px 0 0 #d9dde2;

}

.beneficio-icon img{

    width:68px;

}

.beneficio-item::after{

    display:none;

}

}


/*==========================
MOVILES PEQUEÑOS
==========================*/

@media (max-width:480px){

.circle-border{

    width:270px;
    height:270px;

}

.circle-border::before{

    width:220px;
    height:220px;

}

.circle-content{

    width:165px;

}

.circle-content img{

    width:58px;

}

.circle-content h3{

    font-size:18px;

}

.beneficio-item{

    min-height:82px;

}

.beneficio-icon{

    width:64px;
    height:64px;

    margin-right:-32px;

}

.beneficio-icon img{

    width:58px;

}

.beneficio-text{

    padding-left:18px;

}

.beneficio-text h3{

    font-size:19px;

}

.beneficio-text p{

    font-size:14px;

}

}